fix(LEMS-3701): update editorPage to sync json state #3196

anakaren-rojas · 2026-01-22T22:13:08Z

Summary:

JSON editor data wasn't being synced with Editor Page data

JSON Editor

Updated JSON editor to use modern lifecycle method
Added condition to check whether value prop changed before updating state
Added tests for JSON Editor

Editor Page

Added getSnapshotBeforeUpdate lifecycle method to capture editor changes before unmounting
Use snapshot to update json when json toggled

Issue: LEMS-3701

Test plan:

Screen recordings

Before

Screen.Recording.2026-01-26.at.16.28.27.mov

After

Screen.Recording.2026-01-26.at.16.29.14.mov

…entDidUpdate

github-actions · 2026-01-22T22:13:54Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-01-22T22:15:18Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (ac23e42) and published it to npm. You
can install it using the tag PR3196.

Example:

pnpm add @khanacademy/perseus@PR3196

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3196

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3196

github-actions · 2026-01-22T22:15:41Z

Size Change: +186 B (+0.04%)

Total Size: 485 kB

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	99 kB	+186 B (+0.19%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.8 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	5.98 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	12.1 kB
`packages/perseus-core/dist/es/index.js`	25 kB
`packages/perseus-linter/dist/es/index.js`	8.84 kB
`packages/perseus-score/dist/es/index.js`	9.32 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/index.js`	187 kB
`packages/perseus/dist/es/strings.js`	7.44 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2026-01-22T22:15:42Z

🛠️ Item Splitting: No Changes ✅

…ditorpage

…hing to jsonmode

mark-fitzgerald · 2026-01-27T19:52:13Z

packages/perseus-editor/src/components/json-editor.tsx

+                });
+            }
+        }
+    }


This reads much better! Thank you!!

mark-fitzgerald · 2026-01-27T20:08:19Z

packages/perseus-editor/src/editor-page.tsx

-    componentDidUpdate() {
+    getSnapshotBeforeUpdate(prevProps: Props, prevState: State) {
+        if (!prevProps.jsonMode && this.props.jsonMode) {
+            return _.extend(


Instead of adding an underscore function (I think we are wanting to eventually get rid of underscore), could we write this as:

if (!prevProps.jsonMode && this.props.jsonMode) { const serializedItemEditor = this.itemEditor.current?.serialize({ keepDeletedWidgets: true, }) || {}; const serializedHintsEditor = hints: this.hintsEditor.current?.serialize({ keepDeletedWidgets: true, }); return {...serializedItemEditor, ...serializedHintsEditor}; } return null;

ivyolamit

@anakaren-rojas here's my initial comment/question. Will do a second pass and smoke test.

ivyolamit · 2026-01-27T20:05:55Z

packages/perseus-editor/src/components/json-editor.tsx

We can remove code in line 2, if UNSAFE tag is removed

/* eslint-disable react/no-unsafe */

I wish ESLint would tell us if there's "disable" statements that are unused. 🤷‍♂️

ivyolamit · 2026-01-27T20:08:30Z

packages/perseus-editor/src/components/json-editor.tsx

        };
    }

-    UNSAFE_componentWillReceiveProps(nextProps) {


Do you know why this was marked UNSAFE?

Update, I asked Claude about this:

UNSAFE_componentWillReceiveProps = unsafe (has issues with concurrent rendering)

"componentWillReceiveProps was problematic because it was called before every render triggered by a prop change, making it difficult to distinguish between essential updates and potentially causing infinite loops or unpredictable behavior, especially with asynchronous operations. "

😓

mark-fitzgerald · 2026-01-27T20:13:45Z

packages/perseus-editor/src/editor-page.tsx

+    syncJsonStateFromProps() {
+        this.setState({
+            // @ts-expect-error - TS2322 - Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "hints" | "question" | "answerArea">' is not assignable to type 'PerseusJson'.
+            json: _.pick(this.props, "question", "answerArea", "hints"),


Perhaps the following (to avoid adding underscore):

syncJsonStateFromProps() { this.setState({ json: { question: this.props.question, answerArea: this.props.answerArea, hints: this.props.hints, }, }); }

mark-fitzgerald · 2026-01-27T20:16:57Z

packages/perseus-editor/src/components/json-editor.test.tsx

+        );
+
+        // Assert
+        expect(screen.getByDisplayValue(/Updated content/)).toBeInTheDocument();


Should we also assert that "Initial content" is NOT in the document?

mark-fitzgerald · 2026-01-27T20:22:27Z

packages/perseus-editor/src/components/json-editor.test.tsx

+
+        await userEvent.clear(textarea);
+        textarea.focus();
+        await userEvent.paste('{"content": "User is typing');


I am missing something - how is this invalid user input?

It's incomplete, its missing the " and the closing bracket
{"content": "User is typing
instead of:
{"content": "User is typing"}

mark-fitzgerald · 2026-01-27T20:23:14Z

packages/perseus-editor/src/components/json-editor.test.tsx

+        expect(screen.getByRole("textbox")).toBeDisabled();
+    });
+
+    it("should replace invalid user input when parent updates value", async () => {


Should there be a test for valid user input when the parent updates the value?

mark-fitzgerald

Thanks for fixing this!!

jeremywiebe

I think this makes sense. Thanks for fixing this! I think I've doubled-up on some of Mark's comments but I'd typed them before seeing his. :/

jeremywiebe · 2026-01-27T20:15:55Z

packages/perseus-editor/src/components/json-editor.tsx

I wish ESLint would tell us if there's "disable" statements that are unused. 🤷‍♂️

jeremywiebe · 2026-01-27T20:17:35Z

packages/perseus-editor/src/components/json-editor.tsx

-                    this.state.currentValue ? this.state.currentValue : "",
-                ),
-            );
+    componentDidUpdate(prevProps: Props) {


Given that this function is used to update state, could we just use the static getDerivedStateFromProps instead? I'm not sure it's a huge difference, but it's a static method (which is nice as it is then a pure function.

Thank you for the suggestion!
I looked into it and it doesn't seem like it would work for our use case 😞
The problem we were having was that the JsonEditor wasn't syncing when the parent sent updated props (whether on load or later), so we need ongoing prop synchronization

With componentDidUpdate, we're checking if the value prop from the parent has changed, not just on initial load but throughout the component's lifetime

jeremywiebe · 2026-01-27T20:19:01Z

packages/perseus-editor/src/editor-page.tsx

    }

-    componentDidUpdate() {
+    getSnapshotBeforeUpdate(prevProps: Props, prevState: State) {


TIL: Cool, I hadn't seen this React function before.

jeremywiebe · 2026-01-27T20:20:04Z

packages/perseus-editor/src/editor-page.tsx

+            return _.extend(
+                this.itemEditor.current?.serialize({
+                    keepDeletedWidgets: true,
+                }) || {},
+                {
+                    hints: this.hintsEditor.current?.serialize({
+                        keepDeletedWidgets: true,
+                    }),
+                },
+            );


Can we use a simple object spread here instead of introducing another use of _?

Suggested change

return _.extend(

this.itemEditor.current?.serialize({

keepDeletedWidgets: true,

}) || {},

{

hints: this.hintsEditor.current?.serialize({

keepDeletedWidgets: true,

}),

},

);

return {

...this.itemEditor.current?.serialize({

keepDeletedWidgets: true,

}) ?? {},

hints: this.hintsEditor.current?.serialize({

keepDeletedWidgets: true,

},

);

[editor-state-update] editor change adding props and checks to compon…

8508147

…entDidUpdate

anakaren-rojas self-assigned this Jan 22, 2026

anakaren-rojas added the olc-5.0.07850 label Jan 22, 2026

[editor-state-update] docs(changeset): update editor

370cad9

github-actions bot added the item-splitting-change label Jan 22, 2026

github-actions bot removed the item-splitting-change label Jan 22, 2026

[editor-state-update] update changeset description

5670acd

anakaren-rojas changed the title ~~fix(LEMS-3701): update editor state~~ fix(LEMS-3701): update editorPage to sync json state Jan 22, 2026

anakaren-rojas added 2 commits January 22, 2026 16:04

[editor-state-update] additional logic for jsoneditor and tests for e…

e04145f

…ditorpage

[editor-state-update] lint fix

96f8b37

github-actions bot added item-splitting-change and removed item-splitting-change labels Jan 23, 2026

[editor-state-update] remove jsonmode check from state update

1eed041

anakaren-rojas force-pushed the editor-state-update branch from 1d24064 to 1eed041 Compare January 26, 2026 17:24

anakaren-rojas added 7 commits January 26, 2026 11:51

[editor-state-update] update equality check

a4ef692

[editor-state-update] update logic to include json syncing when switc…

81b7ea4

…hing to jsonmode

[editor-state-update] add empty object for default state

6d54585

[editor-state-update] use getSnapshotBeforeUpdate to capture state

38b069f

[editor-state-update] remove extra line

6a22054

[editor-state-update] update changeset file

88ba123

[editor-state-update] move method based on prettier or lint requirement

4a35cbb

github-actions bot added item-splitting-change and removed item-splitting-change labels Jan 27, 2026

anakaren-rojas marked this pull request as ready for review January 27, 2026 00:58

anakaren-rojas requested a review from a team January 27, 2026 00:58

mark-fitzgerald reviewed Jan 27, 2026

View reviewed changes

ivyolamit reviewed Jan 27, 2026

View reviewed changes

mark-fitzgerald reviewed Jan 27, 2026

View reviewed changes

mark-fitzgerald approved these changes Jan 27, 2026

View reviewed changes

jeremywiebe approved these changes Jan 27, 2026

View reviewed changes

ivyolamit approved these changes Jan 27, 2026

View reviewed changes

anakaren-rojas added 3 commits January 27, 2026 16:02

[editor-state-update] update PR to remove _ and unused comments

2bea3d6

[editor-state-update] lint fix

f294d59

[editor-state-update] remove hint clause

ac23e42

fix(LEMS-3701): update editorPage to sync json state #3196

Are you sure you want to change the base?

fix(LEMS-3701): update editorPage to sync json state #3196

Uh oh!

Conversation

anakaren-rojas commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Screen recordings

Before

After

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivyolamit left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

jeremywiebe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

anakaren-rojas commented Jan 22, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading

mark-fitzgerald Jan 27, 2026 •

edited

Loading